import React from 'react';
import { LightBulbIcon } from '@heroicons/react/24/outline';
import clsx from 'clsx';

function ShortcutsNoMemoized({ className }: { className?: string }) {
  return (
    <div aria-label="tips" className={clsx('flex flex-col items-center gap-2', className)}>
      <h2 className="text-sm font-bold my-2 flex items-center gap-1">
        <LightBulbIcon className="inline-block size-4" />
        告诉你一些使用技巧
      </h2>
      <div className="w-full flex flex-col gap-2 px-5">
        <div className="flex text-xs">
          <span className="text-gray-500 dark:text-neutral-400 flex-none w-[150px]">
            <kbd className="kbd kbd-xs">Ctrl</kbd>
            <span className="mx-1">+</span>
            <kbd className="kbd kbd-xs">K</kbd>
          </span>
          <span className="text-gray-800 dark:text-neutral-200">快速搜索</span>
        </div>
        <div className="flex text-xs">
          <span className="text-gray-500 dark:text-neutral-400 flex-none w-[150px]">
            <kbd className="kbd kbd-xs">Ctrl</kbd>
            <span className="mx-1">+</span>
            <kbd className="kbd kbd-xs">A</kbd>
          </span>
          <span className="text-gray-800 dark:text-neutral-200">选中当前全部资源</span>
        </div>
        <div className="flex text-xs">
          <span className="text-gray-500 dark:text-neutral-400 flex-none w-[150px]">
            <kbd className="kbd kbd-xs">Ctrl</kbd>
            <span className="mx-1">+</span>
            <kbd className="kbd kbd-xs">D</kbd>
          </span>
          <span className="text-gray-800 dark:text-neutral-200">取消选中全部资源</span>
        </div>
        <div className="flex text-xs">
          <span className="text-gray-500 dark:text-neutral-400 flex-none w-[150px]">
            <kbd className="kbd kbd-xs">Ctrl</kbd>
            <span className="mx-1">+</span>
            <kbd className="kbd kbd-xs">R</kbd>
          </span>
          <span className="text-gray-800 dark:text-neutral-200">刷新列表</span>
        </div>
        <div className="flex text-xs">
          <span className="text-gray-500 dark:text-neutral-400 flex-none w-[150px]">
            <kbd className="kbd kbd-xs">Ctrl</kbd>
            <span className="mx-1">+</span>
            <kbd className="kbd kbd-xs">Alt</kbd>
            <span className="mx-1">+</span>
            <kbd className="kbd kbd-xs">B</kbd>
          </span>
          <span className="text-gray-800 dark:text-neutral-200">收起/展开属性面板</span>
        </div>
        <div className="flex text-xs">
          <span className="text-gray-500 dark:text-neutral-400 flex-none w-[150px]">
            <kbd className="kbd kbd-xs">Ctrl</kbd>
            <span className="mx-1">+</span>
            <kbd className="kbd kbd-xs">Alt</kbd>
            <span className="mx-1">+</span>
            <kbd className="kbd kbd-xs">M</kbd>
          </span>
          <span className="text-gray-800 dark:text-neutral-200">切换显示模式</span>
        </div>
        <div className="flex text-xs">
          <span className="text-gray-500 dark:text-neutral-400 flex-none w-[150px]">
            <kbd className="kbd kbd-xs">Ctrl</kbd>
            <span className="mx-1">+</span>
            <kbd className="kbd kbd-xs">Alt</kbd>
            <span className="mx-1">+</span>
            <kbd className="kbd kbd-xs">P</kbd>
          </span>
          <span className="text-gray-800 dark:text-neutral-200">预览选中图片</span>
        </div>
      </div>
    </div>
  );
}

export const Shortcuts = React.memo(ShortcutsNoMemoized);
